<template>
  <ul class="proList" :class="flag ? 'col_2' : 'col_1'">
    <li class="proItem" v-for="item of proList1" :key="item.proid" @click="toDetail(item.proid)">
      <div class="itemImage">
        <img :src="item.img1" alt="">
      </div>
      <div class="itemInfo">
        <div class="itemTitle">{{ item.proname }}</div>
        <div class="itemPrice">¥ {{ item.originprice }}</div>
        <!-- <div class="itemDesc van-multi-ellipsis--l2">{{ item.desc }}</div> -->
      </div>
    </li>
    <!-- <li class="proItem">
      <div class="itemImage">
        <img src="" alt="">
      </div>
      <div class="itemInfo">
        <div class="itemTitle">标题</div>
        <div class="itemPrice">¥ 100</div>
        <div class="itemDesc">描述</div>
      </div>
    </li>
    <li class="proItem">
      <div class="itemImage">
        <img src="" alt="">
      </div>
      <div class="itemInfo">
        <div class="itemTitle">标题</div>
        <div class="itemPrice">¥ 100</div>
        <div class="itemDesc">描述</div>
      </div>
    </li>
    <li class="proItem">
      <div class="itemImage">
        <img src="" alt="">
      </div>
      <div class="itemInfo">
        <div class="itemTitle">标题</div>
        <div class="itemPrice">¥ 100</div>
        <div class="itemDesc">描述</div>
      </div>
    </li> -->
    <div class="icon" @click="flag = !flag">
      <van-icon v-if="flag" size="36" name="bars" />
      <van-icon v-else size="36" name="apps-o" />
    </div>
  </ul>
</template>

<script>
export default {
  props: {
    proList1: Array
  },
  data () {
    return {
      flag: false
    }
  },
  methods: {
    toDetail (proid) {
      this.$router.push({ name: 'detail', params: { proid } })
    }
  }
}
</script>

<style lang="stylus">
.proList.col_1
  .proItem
    display flex
    height 120px
    border-bottom 1px solid #ccc
    box-sizing border-box
    background-color #fff
    .itemImage
      width 100px
      height 100px
      margin 10px
      img
        width 100%
        height 100%
        display block
    .itemInfo
      flex 1
      padding-top 11px
      margin-left 24px
      .van-multi-ellipsis--l2
        font-size 12px
      .itemTitle
        font-size 16px
        line-height 19px
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        height: 38px
        width 220px
      .itemPrice
        margin-top 10px
        font-size 16px
        color red

.proList.col_2
  display flex
  flex-wrap wrap
  .proItem
    width 46%
    margin 2%
    // display flex
    height 300px
    box-sizing border-box
    background-color #fff
    border-radius 20px
    height 280px
    .itemImage
      width 100%
      height 200px
      img
        width 100%
        height 100%
        display block
        border-radius 20px
    .itemInfo
      // flex 1
      padding 8px 10px
      .van-multi-ellipsis--l2
        font-size 12px
      .itemTitle
        font-size 13px
        line-height 19px
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
        height: 38px;
      .itemPrice
        margin-top 6px
        font-size 16px
        color red
.icon
  position fixed
  bottom 100px
  right 10px
  width 40px
  height 40px
  display flex
  justify-content center
  align-items center
  border 1px solid #ccc
  border-radius 50%
  background-color #fff
  color #999
</style>
